<template>
	<div class="app-container">
		<div class="row">
			<span class="left-label">关键字</span>
			<el-input v-model="queryData.procureOrCustomerName" style="width: 200px; margin-right: 20px" placeholder="请输入关键字" />

			<span class="left-label">采购名称</span>
			<el-input v-model="queryData.procureName" style="width: 350px; margin-right: 20px" placeholder="请输入采购名称" />
			<span class="left-label" style="margin-left: 20px">状态</span>
			<el-select v-model="queryData.procureStatus" placeholder="请选择" size="default" clearable style="width: 240px">
				<el-option v-for="dict in procure_status" :key="dict.value" :label="dict.label" :value="dict.value" />
			</el-select>
			<el-button type="primary" @click="search" style="margin-left: 10px">搜索</el-button>
			<el-button v-if="userStore.$state.roles.includes('gc2')" @click="addJi">添加</el-button>
			<el-button @click="exportP">导出</el-button>
		</div>
		<BaseTable v-loading="loading" :columns="columns" :dataList="dataList">
			<template #procureName="{ row }">
				<span style="cursor: pointer; color: #409eff" @click="toDetail(row.procureId)">{{ row.procureName }}</span>
			</template>
		</BaseTable>
		<pagination :total="total" v-model:page="queryData.pageNum" v-model:limit="queryData.pageSize" @pagination="search" />
	</div>
</template>
<script setup>
import { reactive } from 'vue'
import BaseTable from '@/components/BaseTable'
import { listProcure } from '@/api/buy/buy'
const { proxy } = getCurrentInstance()
const { procure_status } = proxy.useDict('procure_status')
const router = useRouter()
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const loading = ref(false)
const queryData = reactive({
	pageNum: 1,
	pageSize: 100,
	procureOrCustomerName: undefined,
	procureName: undefined,
	procureStatus: undefined
})
const columns = ref([
	{ key: 1, label: `采购单名称`, prop: 'procureName', type: 'custom', visible: true },
	{ key: 2, width: '200', label: `项目名称`, prop: 'projectName', type: 'text', visible: true },
	{ key: 2, width: '90', label: `项目编号`, prop: 'projectCode', type: 'text', visible: true },
	{ key: 3, width: '200', label: `状态`, prop: 'procureStatus', type: 'select', data: procure_status, visible: true },
	{ key: 5, width: '150', label: `审核时间`, prop: 'auditTime', type: 'dateTime', visible: true },
	{ key: 6, width: '150', label: `创建时间`, prop: 'createTime', type: 'dateTime', visible: true }
])
const total = ref(0)
const dataList = ref([])
const search = () => {
	loading.value = true
	listProcure(queryData).then((res) => {
		dataList.value = res.rows
		total.value = res.total
		loading.value = false
	})
}
search()
const exportP = () => {
	proxy.download('/function/procure/export', {}, `采购表.xlsx`)
}
const addJi = () => {
	router.push({
		path: '/buy/buyAdd'
	})
}
const toDetail = (id) => {
	router.push({
		path: '/buy/buyDetail',
		query: { id: id }
	})
}
const toEdit = (id) => {
	router.push({
		path: '/buy/buyEdit',
		query: { id: id }
	})
}
</script>
<style lang="scss" scoped>
.row {
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	padding: 5px 0 10px 0;
	.left-label {
		color: #33b6fe;
		height: 24px;
		line-height: 24px;
		position: relative;
		top: 1px;
		margin-right: 0px;
		display: inline-block;
		min-width: 60px;
		margin-left: 10px;
	}
}
</style>
